@function px($px) {
    @return calc($px / 1.5) * 1px;
}

::v-deep .el-rate .el-rate__icon.is-active {
    color: #02102e;
}

::v-deep .el-rate .el-rate__icon {
    font-size: 22px;
}

.income {
    width: 1280px;
    margin: 0 auto;
    font-size: 28px;
    font-family: Manrope, Manrope-700;
    font-weight: 700;
    text-align: LEFT;
    color: #02102e;
    margin-bottom: 60px;
}

.incomeBox {
    width: 1280px;
    border: 1px solid #dddee1;
    border-radius: 16px;
    padding: 40px 0;
    margin: 0 auto;
    margin-bottom: 40px;

    .flexLef {
        width: 100%;
        justify-content: space-evenly;

        .date {
            font-size: 16px;
            font-family: Manrope, Manrope-500;
            font-weight: 500;
            color: #02102e;
            margin-bottom: 16px;
        }

        .money {
            font-size: 20px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            color: #02102e;
        }
    }
}

.overview {
    border: 1px solid #dddee1;
    border-radius: 16px;
    padding: 32px;

    .echact {
        margin-top: 30px;
    }

    .over {
        font-size: 20px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: LEFT;
        color: #02102e;
    }

    .tabs {
        margin-top: 30px;
    }

    .date {
        font-size: 16px;
        font-family: Manrope, Manrope-500;
        font-weight: 500;
        text-align: LEFT;
        color: #8590a1;
        margin-top: 12px;
        margin-bottom: 30px;

        img {
            width: 10px;
            height: 10px;
            margin-left: 10px;
        }
    }
}

.earning {
    margin-top: 60px;
    font-size: 20px;
    font-family: Manrope, Manrope-700;
    font-weight: 700;
    text-align: LEFT;
    color: #02102e;
}

.reviewsss {
    position: relative;
    margin-bottom: 80px;
    margin-top: 40px;

    .lefBox {
        width: 628px;
        height: 229px;
        border: 1px solid #dddee1;
        border-radius: 16px;
        padding: 32px;
    }

    .imgBox {
        width: 220px;
        height: 165px;
        border-radius: 8px;

        img {
            width: 220px;
            height: 165px;
            border-radius: 8px;
        }
    }

    .leftCon {
        width: 304px;

        .top {
            font-size: 16px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            margin-bottom: 8px;
        }

        .count {
            font-size: 12px;
            font-family: Manrope, Manrope-400;
            font-weight: 400;
            text-align: LEFT;
            color: #02102e;
            margin-bottom: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            // white-space: nowrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .botTime {
            font-size: 10px;
            font-family: Manrope, Manrope-400;
            font-weight: 400;
            text-align: LEFT;
            color: #8590a1;
            margin-bottom: 4px;
        }

        .earning {
            font-size: 12px;
            font-family: Manrope, Manrope-500;
            font-weight: 500;
            text-align: LEFT;
            color: #4acd2c;
        }
    }

}

.reviews {
    position: relative;
    // margin-bottom: 10px;

    .reviewsBox {
        width: px(530);
        max-height: 300px;
        overflow-y: auto;
        padding: px(26) px(32);
        position: absolute;
        top: 40px;
        left: 20px;
        background: #ffffff;
        border: px(1.3) solid #f1f2f4;
        border-radius: px(10);
        z-index: 99999999999999999999;
        box-shadow: px(5.3) px(5.3) px(16) 0px rgba(2, 16, 46, 0.08);

        .reviewsBoxitem {
            border-bottom: px(1.3) solid #eaebee;
            padding-bottom: px(20);
            margin-top: px(20);

            &:last-child {
                border-bottom: none;
                padding-bottom: 0;
            }

            .leftInp {
                width: 75px;
                // width: px(21);
                // height: px(21);
                height: 17px;
                margin-right: px(25);

                .inpImg {
                    width: 100%;
                    height: 100%;
                }
            }

            .rigCount {
                width: 1280px;
                font-size: px(18.6);
                font-family: Manrope, Manrope-500;
                font-weight: 500;
                text-align: LEFT;
                color: #02102e;
            }
        }

        .xians {
            width: 100%;
            height: 0px;
            border-bottom: px(1.3) solid #ebecef;
            margin: px(20) 0;
        }
    }

    .reviewsLeft {
        font-size: px(20);
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: LEFT;
        color: #02102e;
        line-height: px(24);
    }

    .rigFilter {
        font-size: 16px;
        font-family: Manrope, Manrope-500;
        font-weight: 500;
        text-align: LEFT;
        color: #02102e;

        .filterImg {
            width: 10px;
            height: 10px;
            margin-left: 10px;
        }
    }


}

.reviews {
    // border: 1px solid #dddee1;
    border-radius: 16px;
    padding: 0px;
    margin-top: 0px;

    .reviewsTit {
        font-size: 20px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: LEFT;
        color: #02102e;
    }

    .flexF {
        .rouNum {
            font-size: 36px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            margin-top: 15px;
        }

        .rigR {
            .jindu {
                margin-bottom: 12px;

                span {
                    font-size: 14px;
                    font-family: Manrope, Manrope-400;
                    font-weight: 400;
                    text-align: LEFT;
                    color: #02102e;
                    margin-top: -4px;
                }

                i {
                    margin-top: -5px;
                    font-size: 14px;
                    font-weight: 400;
                    text-align: LEFT;
                    color: #02102e;
                }

                .progree {
                    width: 270px;
                    margin: 0 12px;
                }
            }
        }

        .lefF {
            .rougi {
                font-size: 15px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #02102e;
                margin-bottom: 12px;
            }

            .rate {
                img {
                    width: 18px;
                    height: 18px;
                    margin-left: 5px;
                }
            }
        }
    }
}

.xian {
    width: 100%;
    height: 0px;
    border-bottom: 1px solid #eaebee;
    margin: 37px 0;
}

.commentList {
    margin-top: px(50);

    .oneBox {
        .oneBoxTop {
            .avaert {
                width: px(80);
                margin-right: px(30);

                img {
                    width: px(80);
                    height: px(80);
                    border-radius: px(40);
                }
            }

            .avartCount {
                width: 1280px;
                height: px(200);
                // background-color: pink;

                .name {
                    font-size: px(18);
                    font-family: Manrope, Manrope-700;
                    font-weight: 700;
                    text-align: LEFT;
                    color: #02102e;
                }

                .stars {
                    margin-top: px(14);

                    .age {
                        font-size: px(18);
                        font-family: Manrope, Manrope-400;
                        font-weight: 400;
                        text-align: LEFT;
                        color: #8590a1;
                        margin-right: px(10);
                    }

                    .genin {
                        font-size: px(18);
                        font-family: Manrope, Manrope-400;
                        font-weight: 400;
                        text-align: LEFT;
                        color: #02102e;
                    }

                    .hengXian {
                        width: 0px;
                        height: px(13.3);
                        border: px(1) solid #8590a1;
                        margin: 0 px(10);
                    }

                    .xingxing {
                        font-size: px(18);
                        font-family: Manrope, Manrope-400;
                        font-weight: 400;
                        text-align: LEFT;
                        color: #02102e;

                        .xingImg {
                            width: px(24);
                            height: px(24);
                            margin-right: px(8);
                        }
                    }
                }

                .icon {
                    font-size: px(16);
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #8590a1;
                    margin-top: px(20);

                    .iconImg {
                        width: px(24);
                        height: px(24);
                        margin-right: px(6);
                    }
                }

                .count {
                    font-size: px(18);
                    font-family: Manrope, Manrope-400;
                    font-weight: 400;
                    text-align: LEFT;
                    color: #02102e;
                    line-height: 1.3;
                    margin-top: px(20);
                }
            }
        }

        .towBoxTop {
            width: 100%;
            margin-top: px(-10);

            .leftTop {
                width: px(80);
                margin-right: px(30);
            }

            .boxRig {
                width: 1280px;
                // height: 200px;
                margin: px(30) 0;
                margin-bottom: px(50);

                .rigName {
                    .name {
                        font-size: px(18);
                        font-family: Manrope, Manrope-700;
                        font-weight: 700;
                        text-align: LEFT;
                        color: #02102e;
                        margin-bottom: px(8);
                    }

                    .count {
                        font-size: px(18);
                        font-family: Manrope, Manrope-400;
                        font-weight: 400;
                        text-align: LEFT;
                        color: #02102e;
                    }
                }

                .avacr {
                    width: px(64);
                    margin-right: px(20);

                    .topImg {
                        width: px(64);
                        height: px(64);
                        border-radius: px(32);
                    }
                }
            }
        }
    }
}

.redColor {
    color: #C1C5CB !important;
}